<template>
    <div>
        <div class="big clearfix">
            <ul style="width: 60%; border: 1px solid #ccc;  float: left; ;">
                <li class="clearfix li1">
                    <div class="o" style="float: left; color: black; font-size: 20px;">待办事项</div>
                    <div class="o" style="float: right;"><a href="#" style="color: rgb(67, 214, 233);">查看更多</a></div>
                </li>
                <li class="clearfix li1" >
                    <div class="o aa" style="float: left;">[待办事项] 您申请的报销还未审批，请及时查看，防止过期</div>
                    <div class="o" style="float: right;">2022年8月</div>
                </li>
                <li class="clearfix li1">
                    <div class="o" style="float: left;">[待办事项] 小红的请假申请还未审批，请及时查看</div>
                    <div class="o" style="float: right;">2022年8月</div>
                </li>
                <li class="clearfix li1">
                    <div class="o" style="float: left;">[待办事项] 小明的报销还未审批，请及时查看</div>
                    <div class="o" style="float: right;">2022年8月</div>
                </li>
                <li style="text-align: center;" class="li1">
                  <div class="o"> 暂无待办事项</div>
                </li>
            </ul>
            <el-calendar v-model="value" style=" width: 35%; float: right; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5)">
</el-calendar>
        </div>
        <div class="big_two clearfix" >
            <div class="left" style="float: left;border: 1px solid #ccc; ">
                <h2 style="padding: 10px 5px; border-bottom: 1px solid #ccc;">员工数据</h2>
                <ul style=" width: 100%; display: flex; flex-direction: row;justify-content: space-between;flex-wrap: wrap; ">
                    <li class="li2">
                        <p>员工总人数</p>
                        <p>2000人</p>
                    </li>
                    <li class="li2">
                        <p>正式员工</p>
                        <p>1000人</p>
                    </li>
                    <li class="li2 lii">
                        <p>实习生</p>
                        <p>15人</p>
                    </li>
                    <li class="li2">
                        <p>本月待入职</p>
                        <p>15人</p>
                    </li>
                    <li class="li2">
                        <p>本月待离职</p>
                        <p>13人</p>
                    </li>
                    <li class="li2 lii">
                        <p>本月待转正</p>
                        <p>3人</p>
                    </li>
                </ul>
            </div>
            <div class="right" style="float: right;">
                <h2 style="padding: 10px 20px; border-bottom:1px solid #ccc ;">员工地区分布</h2>
                <div id="main"></div>

            </div>
        </div>
        <div class="zui" style="border: 1px solid #ccc; margin-top: 30px;">
            <h2 style="padding: 10px 20px; ">员工生日</h2>
            <div id="main1"></div>
        </div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
export default {
    data() {
        return {
            value:new Date()
        }
    },
    methods: {
        yuan(){
            var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
 
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '90%',
      data: [
        { value: 948, name: '东北' },
        { value: 735, name: '蒙古' },
        { value: 580, name: '河北' },
        { value: 484, name: '山西' },
        { value: 600, name: '河南' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
        },
        zhu(){
            var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [100, 140, 230, 100, 130, 224, 151,164,196,217,219,132],
      type: 'bar',
      barWith:'50%',
      color:'#b886f8'
    }
  ]
};

option && myChart.setOption(option);
        }
    },
    mounted() {
    
        this.yuan()
        
        this.zhu()
    },
    
}
</script>
<style src="../assets/base.css"></style>
<style scoped>
  /* .aa{
  
  } */
    .right{
    width: 50%;
    border: 1px solid #ccc;
    }
    .big_two{
    margin-top: 40px;}
    .li2{
    width: 30%;
    margin: 10px 3px;
    border-right: 1px solid #ccc;
    text-align: center;
    }
    .lii{
    border: 0;}
    .li1{
    list-style: none;
    border: 1px solid #ccc;
    padding: 4px 4px;
    font-size: 13px;
    }
    .o{
    margin: 10px 10px;
    color: #ccc;
    }
::v-deep .el-calendar__body {
  padding: 0;
}
::v-deep .el-calendar-table .el-calendar-day {
  height: 25px;
}
#main{
height: 155px;
/* width: 100; */
}
#main1{
width: 100%;
height: 200px;
}
</style>